<template>
	<view class="order-wrap page-bg">
		<view class="status-view">
			<view class="status">{{info.assembleStatusView}}</view>
			<view v-if='info.assembleStatus===2' class="status-desc">(赶紧邀请朋友一起来拼团吧)</view>
			<view v-if='info.assembleStatus===1' class="status-desc">(恭喜您已中奖,等待商家为你发货)</view>
			<view v-if='info.assembleStatus===0' class="status-desc">(很遗憾，您没有中奖)</view>
		</view>

		<view class="address-wrap">
			<view class="addres ">
				<view class="address-name">
					<text>{{info.realName}}</text>
					<text>{{info.phoneNumber}}</text>
				</view>
				<view class="address-add desc">{{info.address}}</view>
			</view>
		</view>

		<view class="wrap">
			<view class="team-member">
				<view v-if="luckStatus===2" class="title" >拼团中，还差 <text class="theme">{{info.askNum-info.involvedNum}}</text>人，
				剩余<text class="theme">{{freeTime.h}}</text>时<text class="theme">{{freeTime.m}}</text>分<text
					 class="theme">{{freeTime.s}}</text>秒</view>
				<view v-else class="title">{{info.assembleStatusView}}</view>
				<view class="member-img-wrap" >
					<image v-for="(item, index) in teamMember" :key='index+"key"' class="member-img" 
						   :src="item.avatar | avatar"></image>
				</view>
			</view>

			<view class="lunk-wrap2 luck-wrap3">
				<block v-if="!isStart">
					<view class="btn-start" v-if="luckStatus === 2">{{text}}</view>
					<!-- <view class="btn-start" v-if="luckStatus !== 2" @click="start">{{text}}</view> -->
				</block>
				
				<!-- 未中奖 -->
				<block v-if="luckStatus === 0">
					<view class="view-luck">
						<image class="view-luck__img" src="../../static/item_38.png" mode=""></image>
						<view class="view-luck__title">幸运星</view>
						<view class="view-luck__info">
							<image class="view-luck__avatar" :src="hostLuckAvatar | avatar" mode=""></image>
							<view class="view-luck__phone">{{hostLuckUserPhone | phonePartOf}}</view>
						</view>
					</view>
					<view class="btn-start btn-getmoney" >拼团结果: {{info.assembleStatusView}}</view>
				</block>
				
				<!-- 已中奖 -->
				<block v-if="luckStatus === 1">
					<view class="view-luck">
						<image class="view-luck__img" src="../../static/item_38.png" mode=""></image>
						<view class="view-luck__title">幸运星</view>
						<view class="view-luck__info">
							<image class="view-luck__avatar" :src="hostLuckAvatar | avatar" mode=""></image>
							<view class="view-luck__phone">{{hostLuckUserPhone | phonePartOf}}</view>
						</view>
					</view>
					<view class="btn-start btn-getmoney" >拼团结果: {{info.assembleStatusView}}</view>
				</block>
			</view>

			<!-- 中奖浮窗 -->
			<view v-if='luckStatus === 1333' class="pop-luck" @touchmove.stop.prevent="moveHandle">
				<view class="pop-luck__con">
					<view class="pop-luck-bg-wrap">
						<image class="pop-luck__bg" src="../../static/item_39.png" mode=""></image>
					</view>
					<view class="view-luck__info pop-luck__info ss">
						<image class="view-luck__avatar" :src="hostLuckAvatar" mode=""></image>
						<view class="view-luck__phone">{{hostLuckName}}</view>
					</view>
					<view class="btn-start btn-getmoney pop-btn" @click="start2">{{info.assembleStatusView}}</view>
					<image class="pop-luck__close" src="../../static/common/icon_13.png" mode=""></image>
				</view>
			</view>

			<!-- 未中奖领取红包 -->
			<view v-if='luckStatus === 42222' class="pop-luck" @touchmove.stop.prevent="moveHandle">
				<view class="pop-luck__con">
					<view class="pop-luck-bg-wrap">
						<image class="pop-luck__bg" src="../../static/item_39.png" mode=""></image>
					</view>
					<view class="pop-number">
						6.66
					</view>
					<view class="btn-start btn-getmoney pop-btn" @click="start2">领取红包</view>
					<image class="pop-luck__close" src="../../static/common/icon_13.png" mode=""></image>
				</view>
			</view>

			<view class="order-group">
				<view class="goods-item" v-if="info.orderItem">
					<image class="goods-img" :src="info.orderItem.imgUrl"></image>
					<view class="goods-info">
						<view class="goods-title">{{info.orderItem.comTitle}}</view>
						<view class="goods-sepc">{{info.orderItem.skuName}}</view>
						<view class="goods-price">
							<text class="price yuan">{{info.orderItem.price}}</text>
							<text class="num-order">x{{info.orderItem.qty}}</text>
						</view>
					</view>
				</view>

				<view class="order-info">
					<view class="line-info">
						<view class="line-info__title">订单金额</view>
						<view class="line-info__con yuan">{{info.actualAmount}}</view>
					</view>
					<view class="line-info" v-if="info.orderItem">
						<view class="line-info__title" >运费(快递)</view>
						<view class="line-info__con">+<text class="yuan"></text>{{info.orderItem.expressFee}}</view>
					</view>
					<view class="line-info" v-if='info.points'>
						<view class="line-info__title">{{common.bean}}</view>
						<view class="line-info__con">-<text class="yuan"></text>{{info.points}}</view>
					</view>
					<view class="line-info" v-if='info.couponValue'>
						<view class="line-info__title">优惠券</view>
						<view class="line-info__con">-<text class="yuan"></text>{{info.couponValue}}</view>
					</view>
					<view class="line-info" v-if='info.redPacket'>
						<view class="line-info__title">红包</view>
						<view class="line-info__con">-<text class="yuan"></text>{{info.redPacket}}</view>
					</view>
				</view>
				<view class="all-mount theme">
						实付金额:
					<text class="yuan price">{{info.actualAmount}}</text>
				</view>
			</view>

			<view class="line-desc-wrap">
				<view class="line-desc">
					<view class="line-info__title">订单号码:</view>
					<view class="line-info__long">{{info.orderNo}}</view>
				</view>
				<view class="line-desc">
					<view class="line-info__title">下单时间:</view>
					<view class="line-info__long">{{info.creationTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.payTime">
					<view class="line-info__title">付款时间:</view>
					<view class="line-info__long">{{info.payTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.deliveryTime">
					<view class="line-info__title">发货时间:</view>
					<view class="line-info__long">{{info.deliveryTime | formatTime}}</view>
				</view>
				<view class="line-desc" v-if="info.creationTime">
					<view class="line-info__title">成交时间:</view>
					<view class="line-info__long">{{info.creationTime | formatTime}}</view>
				</view>
			</view>
			<view class="interval"></view>

			<view class="contact-us" @click="makePhone">
				<image class="contact-us__icon" src="../../static/common/icon_30.png" mode=""></image>
				<view class="contact-us__title">联系客服</view>
			</view>
		</view>

		<view class="once-pay" v-if="info.assembleStatus===2">
			<view class="once-price">
			</view>
			<view class="btn btn-orange" @click="changShow(true)">邀请好友</view>
		</view>
		
		<view class="pop-wrap" @clicks.stop="changShow(false)" @touchmove.stop.prevent="moveHandle" :animation='animationData'>
				<view class="pop-content"  @click.stop="changShow(true)">
					<image class="pop-close" src="../../static/common/close.png" @click.stop="changShow(false)"></image>
					<view class="pop-title">
						<view class="pop-title__t">邀请好友</view>
					</view>
					<scroll-view class="pop-body nav-wrap" :scroll-y="true">
						<view class="nav-wrap">
							<view class="nav-item" @click="uniShare">
								<image :src="item_14" class="nav-img" mode=""></image>
								<view class="nav-title">微信好友</view>
							</view>
							<view class="nav-item" @click="uniShareLine">
								<image :src="item_15" class="nav-img" mode=""></image>
								<view class="nav-title">微信盆友圈</view>
							</view>
							<view class="nav-item" @click="copyLink">
								<image :src="item_16" class="nav-img" mode=""></image>
								<view class="nav-title">复制链接</view>
							</view>
						</view>
					</scroll-view>
				</view>
		</view>
		
		<popShare :isShare='isShare' @closeShare='changShow'></popShare>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import nonePe from '../../static/item_13.png'
	import item_14 from '../../static/item_14.png'
	import item_15 from '../../static/item_15.png'
	import item_16 from '../../static/item_16.png'
	import popShare from '../../components/popShare.vue'
	// #ifdef H5
	let jweixin = require('jweixin-module') 
	// #endif
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				id: '',
				info: {},
				status: 0,
				nonePe,
				animationData: {},
				item_14,
				item_15,
				item_16,
				menuData: [ ],
				isShare: false, // 控制H5分享弹窗
				isAppShare:  false, // 控制app风险弹窗
				
				
				luckName: '',
				luckIndex: -1,
				hostLuckName: '',
				hostLuckIndex: 2,
				hostLuckAvatar: '',
				hostLuckUserPhone: '',
				luckTime: 2000, //抽奖时间 2s
				luckIntaral: 200, // 随机间隔时间
				luckStatus: 2, // 0:未中奖， 1：已中奖  2：拼团中
				teamMember: [],
				freeTime: {d:'00', h:'00', m:'00',s:'00'} , // 拼团剩余时间
				text: '拼团中...', // 状态文本
				
				isStart: false, // 是否开奖
				
				shareUrl: '',
				userInfo: {},
				common
			}
		},

		async onLoad(options) {
			this.id = options.id
			this.menuData = [
				{id: 1, title: '微信好友', url: '/pages/shop/shopCate', imgPath: this.item_14},
				{id: 2, title: '朋友圈', url: '/pages/mine/order', imgPath: this.item_15},
				{id: 3, title: '复制链接', url: '/pages/mine/address', imgPath: this.item_16}
			]
			this.userInfo = common.getUserInfo()
			await this.getInfo()
			// #ifdef H5
			 this.getJsApiParam()
			// #endif
		},

		methods: {
			getInfo() {
				api.assembleOrderDetails({ id: this.id }, (res) => {
					if (res) {
						let teamMember = res.assembleUserList || []
						teamMember.map((item, index) => {
							if(item.isWin) {
								this.hostLuckIndex = index
								this.hostLuckName = item.nickName || '未知用户名'
								this.hostLuckAvatar = item.avatar
								this.hostLuckUserPhone = item.userPhone
							}
						})
						 
						for(let i = 1; i < res.askNum - res.involvedNum; i++) {
							teamMember.push({
								avatar: nonePe,
								nickName: '未知',
								isRegimental: false,	
								isWin: false
							})
						}
						this.teamMember = teamMember
						this.info = res || {}
						let status = res.assembleStatus
						if(status !== 2) {
							this.text = '点击开奖'
						}
						this.luckStatus = status
						//this.luckStatus = 2 // 拼团中
						//this.luckStatus = 1 // 已中奖
						//this.luckStatus = 0 // 未中奖
						
						this.getFreeTime(res) 
						this.shareUrl = `${common.apiHost}m/#/pages/index/index/?sourceUserId=${this.userInfo.id}&shopTeamDetailId=${res.orderItem.comSpuId}`
						// #ifdef H5
						 this.share()
						// #endif
					}
				})
			},
			
			makePhone() {
				this.$makePhoneCall()
			},
			
			moveHandle() {},
			
			// 获取倒计时
			getFreeTime(info) {
				let that = this
				let date1 = new Date()
				let date2 = new Date(info.endTime)
				let lastTime = (date2 - date1 ) / 1000
				let d,h,m,s,timeText
				let timer = setInterval(function(){
					lastTime--
					d = parseInt(lastTime / (24*3600))
					h = parseInt(lastTime / 60 / 60 % 24)
					m = parseInt(lastTime / 60 % 60)
					s = parseInt(lastTime % 60)
					s = s < 10 ? '0' + s : s 
					timeText = d * 24 + h +':' + m + ':' + s
					that.freeTime = { h: d * 24 + h, m, s }
					
					if(info.isFinish) {
						clearTimeout(timer)
					}
				},1000)
			},

			setLuckIndex(luckIndex) {
				this.luckIndex = luckIndex
			},

			start() {
				// 获取随机索引
				let sumTime = 0
				let len = this.teamMember.length
				this.luckTime = (len + this.hostLuckIndex + 2) * this.luckIntaral
				let random = 0
				let timer = setInterval(() => {
					// 依次给激活索引
					this.luckIndex = random
					sumTime += this.luckIntaral
					console.log(sumTime)
					if (sumTime === this.luckTime) {
						clearInterval(timer)
						this.luckName = this.hostLuckName
						this.luckIndex = this.hostLuckIndex
					}
					if (random >= len) {
						random = 0
					} else {
						random += 1
					}
					console.log(random)
				}, this.luckIntaral)
				
				this.isStart = true
				console.log(sumTime)
			},
			
			link(url) {
				this.$link(url)
			},
			
			changShow(status) {
				// #ifdef H5
				 this.isShare = status
				// #endif
				
				// #ifndef H5 
				this.isAppShare = status
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction:'ease-out'
				})
				if(status) {
					this.animationData = animation.opacity(1).top(0).step().export()
				}else{
					this.animationData = animation.opacity(0).top('100%').step().export()
				}
				// #endif
			},
			
			// app分享-复制链接
			copyLink() {
				let that = this
				let shareUrl = that.shareUrl
				uni.setClipboardData({
				    data: shareUrl,
					success() {
						that.$showToast('链接复制成功~')
					}
				})
			},
			
			getJsApiParam(callback) {
				let currentUrl = window.location.href
				uni.request({
				    url: common.apiHost + `wechat/getWxJsApiParams?curUrl=${currentUrl}` ,
				    data: { curUrl: currentUrl },
					method: 'GET',
				    success: (res) => {
				       res = res.data.result	
					   jweixin.config({
						 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						 appId: res.appId, // 必填，公众号的唯一标识
						 timestamp: res.timestamp, // 必填，生成签名的时间戳
						 nonceStr: res.nonceStr, // 必填，生成签名的随机串
						 signature: res.signature,// 必填，签名
						 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
						 // jsApiList: 'updateAppMessageShareData,updateTimelineShareData'.split(',')
					   });
				    }
				});
			},
			
			share() {
				console.log('执行share方法');
				let that = this
				let userInfo = common.getUserInfo()
				let info = that.info
				let title = info.orderItem.comTitle
				let desc = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let link = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamShareDetailId=${info.assembleId}`
				let imgUrl = info.orderItem.imgUrl
				let shareData = {
					title, // 分享标题
					desc, // 分享描述
					link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl, // 分享图标
					success: function () {
					  // 设置成功
					  //that.$showToast(`页面分享成功, 分享链接为${link}`)
					},
					cancel: function() {
					}
				}
				jweixin.ready(function () {   //需在用户可能点击分享按钮前就先调用
				  jweixin.updateAppMessageShareData(shareData)
				  jweixin.updateTimelineShareData(shareData)
				});
			},
			
			// app分享-分享给朋友
			uniShare() {
				let that = this
				let info = that.info
				let shareUrl = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamShareDetailId=${info.orderItem.comSpuId}`
				let title = info.orderItem.comTitle
				let summary = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let imageUrl = info.orderItem.imgUrl
				common.uniShare(shareUrl, title, summary, imageUrl)
			},
			
			// app分享-分享给朋友圈
			uniShareLine() {
				let that = this
				let info = that.info
				let shareUrl = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopTeamShareDetailId=${info.orderItem.comSpuId}`
				let title = info.orderItem.comTitle
				let summary = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				let imageUrl = info.orderItem.imgUrl
				common.uniShare(shareUrl, title, summary, imageUrl)
			}
		},
		
		components:{
			popShare
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.addres {
		background: @f;
		.br;
		.content-20;
		flex-wrap: wrap;
		background: url(../../static/common/icon_08.png) no-repeat left bottom, #fff;
		background-size: 100% 9upx;
		position: relative;
		margin-bottom: 0;
		.address-name {
			.fw;
			.f32;
			width: 100%;

			text {
				padding-right: 20upx;
			}
		}

		.desc {
			padding: 20upx 0;
			.f24;
		}

		.address-add {
			.f32;
			padding-bottom: 10rpx;
		}
	}

	.address-wrap {
		.link::after {
			position: absolute;
			right: 20upx;
		}
	}

	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;

		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}

	}

	.luckdraw {
		.content-20;
	}

	.luck-wrap3 {
		.status-wait {
			color: #fff;
			position: relative;
			width: 100%;
			text-align: center;
			font-size: 30px;
			margin-bottom: 10px;
			letter-spacing: 0.3em;
			margin-top: 10rpx;
		}

		.avatar-list {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		
			width: 100%;
			.flex-base;
			justify-content: center;
			flex-wrap: wrap;
		}

		.img-wrap {
			width: 90rpx;
			height: 90rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			display: block;
			transition: all 0.2s ease-in-out;
		}

		.avatar-active {
			transform: scale(1.3, 1.3);
			box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 1);
			border: 1px solid @f;
		}
	}

	// 未中奖
	.view-luck {
		width: 100%;
		height: 245rpx;
		position: relative;
		margin-bottom: 20rpx;
		.content-30;
		.flex-base;
		justify-content: center;
		.view-luck__img {
			position: absolute;left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.luck-wrap3 {
		.view-luck__title {
			width: 60rpx;
			height: 150rpx;
			background-color: #fff79f;
			.f30;
			writing-mode: tb;
			position: relative;
			line-height: 30rpx;
			margin-right: 10rpx;
			letter-spacing: 4rpx;
			color: #87611b;
			.flex-base;
			justify-content: center;
		}
	}

	.view-luck__info {
		padding: 20rpx;
		box-sizing: border-box;
		border: 1px solid @font-orange-color;
		.flex-base;
		position: relative;
		height: 150rpx;
		overflow: hidden;
	}

	.view-luck__avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		display: block;
		margin-right: 10rpx;
	}

	.view-luck__phone {
		.fw;
		color: @f;
		font-size: 60rpx;
	}

	.pop-luck {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		.flex-base;
		flex-direction: column;
		justify-content: center;
    z-index: 999;
		.pop-luck__con {
			position: relative;
			.flex-base;
			justify-content: center;
			flex-direction: column;
			width: 80vw;
			height: 80vw;
		}

		.pop-luck-bg-wrap {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			/* animation: rotate 7s linear;
			animation-iteration-count: infinite;
			transform-origin: center; */
		}

		.pop-luck__bg {
			width: 100%;
			height: 100%;
		}

		.pop-luck__close {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			bottom: 0;
		}

		@keyframes rotate {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.pop-luck__info {
			.flex-base;
			flex-direction: column;
		}
	}

	.pop-number {
		position: relative;
		color: #fff;
		font-size: 40px;
		font-weight: bold;
		padding-top: 40px;
	}

	.lunk-wrap {
		.content-20;
		.flex-base;
		justify-content: center;
		margin-top: 100upx;
		margin-bottom: 100upx;
		height: 300upx;
		border: 1px solid @border-color;
	}

	.lunk-wrap2 {
		width: 100%;
		margin-bottom: 20rpx;
		    display: flex;
		    flex-wrap: wrap;
			justify-content: center;
		.bg {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute;
			display: block;
		}

		.time-limit {
			position: relative;
			.f24;
			color: @f;
			border: 1px solid @f;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}

		.avatar-wrap {
			position: relative;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			padding: 40rpx 80rpx;
			background-color: @f;
			/* height: 160rpx;
			width: 400rpx; */
			box-sizing: border-box;
			.br;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				display: block;
			}
		}

		.avatar-con {
			width: 100%;
			height: 100%;
			.flex-base;
			justify-content: center;
			transition: all 2s ease-in-out;
		}
	}

	.btn-start {
		position: relative;
		.f26;
		.fw;
		color: #87611b;
		background-color: @f;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		border-radius: 50rpx;
	}

	.btn-getmoney {
		.fw;
		display: inline-block;
		color: @theme-color  !important;
	}

	.pop-btn {
		margin: 20rpx 0;
	}

	.goods-item {
		.flex-base;
		margin-bottom: 20upx;
		padding: 0;
		padding-bottom: 20rpx;
		.bb;

		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}

		.goods-info {
			flex-grow: 2;
		}

		.goods-title {
			.f30;
			width: 100%;
		}

		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}

		.goods-price {
			width: 100%;
			.flex-base;
			margin-top: 0;
			justify-content: space-between;

			.num-order {
				.f24;
			}
		}
	}

	.status-view {
		background-color: @font-orange-color;
		color: @f;
		padding: 20rpx 0 40rpx 0;
		box-sizing: border-box;
		text-align: center;

		.status {
			.f30;
		}

		.status-desc {
			.f24;
		}
	}

	.address-wrap {
		position: relative;
		top: -20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.wrap {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.team-member {
		.br;
		background-color: @f;
		margin-bottom: 20rpx;
		.content-20;
		.title {
			.f26;
			margin-bottom: 20rpx;
		}
	}

	.member-img-wrap {
		display: flex;
		    flex-wrap: wrap;
		    justify-content: space-around;
		.member-img {
			margin-bottom: 20rpx;
			width: 94rpx;
			height: 94rpx;
			border-radius: 100%;
			margin-right: 20rpx;
		}
	}

	.order-info {
		padding-bottom: 20rpx;
		.bb;
		line-height: 35rpx;

		.line-info {
			.flex-base;
		}

		.line-info__title {
			.f24;
			color: @font-dark-color;
		}

		.line-info__con {
			.f26;
		}
	}

	.all-mount {
		padding-top: 20rpx;
		text-align: right;
		.f24;

	}

	.line-desc-wrap {
		background-color: @f;
		.br;
		.content-20;
		line-height: 35rpx;

		.line-desc {
			.flex-base;
			justify-content: flex-start;
		}

		.line-info__title {
			.f24;
			color: @font-dark-color;
			width: 160rpx;
		}

		.line-info__con {
			.f24;
		}
	}

	.contact-us {
		background-color: @f;
		margin-bottom: 20rpx;
		.br;
		height: 88rpx;
		line-height: 88rpx;
		.flex-base;
		justify-content: center;

		.contact-us__icon {
			width: 36rpx;
			height: 26rpx;
			display: block;
			margin-right: 10rpx;
		}

		.contact-us__title {
			.f28;
		}
	}


	.once-pay {
		height: 100upx;
		.flex-base;
		padding: 0 30upx;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: @f;

		.btn-orange {
			height: 60rpx;
			line-height: 60rpx;
			.f26;
		}
	}
	
	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
		.flex-base;
		align-items: flex-end;
		z-index: 99999;
		.nav-wrap{
			width: 100%;
				padding: 20upx 0;
				background: @bg-base-color;
				border-radius: 10upx;
				.flex-base;
			}
			.nav-item{
				width: 20%;
				text-align: center;
				.flex-base;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
			}
			.nav-img{
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				margin-bottom: 20upx;
			}
			.nav-title{
				font-size: @font-size-24;
				color: @font-base-color;
			}
	}
	
	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: relative;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
	
		padding-top: 30rpx;
	}
	
	.pop-title {
		.flex-base;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
	
	}
	
	.pop-close {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
</style>
